@charset "UTF-8";

    body,
    html{
        height:100%;
    }
    .page{
        max-width: 7.5rem;
        min-width: 3.2rem;
        height: 100%;
        margin:0 auto;
        /* 弹性布局 */
        display: flex;
        /* 设置子元素的排列方向-colunm-从上到下垂直排列 */
        flex-direction: column;


        /* background-color: yellow; */
    }
      .container{
        max-width: 7.5rem;
        min-width: 3.2rem;
        /* 子元素放大分配空间 */
         flex-grow: 1;
        /* 超出屏幕后出现滚动条 */
        overflow-y: auto; 
        background-color: #f2f2f2;
    }
    .header{
        background-color: #FF6040;
        background-image: linear-gradient(180deg,#ff6040,#ff887d);
        padding-top: .86rem;

    }
    .header .top{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding:0 .2rem;
        height: .9rem;
    }
    .header .gps{
        font-size:.36rem;
        color: #fff;
    }
    .header .stor{
        font-size:.41rem;
        color: #fff;
    }
    .header .top img{
        width: 1.82rem;
        height: 0.48rem;
    }
    .header .top input[type=search]{

        width: 3.42rem;
        border: 2px solid #E6E6E6;
        box-sizing: border-box;
        border-radius: 6px;

        font:.28rem/.66rem "微软雅黑";
        color: #999999;
        text-indent: .77rem;

        background:url("../images/放大镜.png") no-repeat .25rem .17rem #fff;
        background-size: .32rem;
        
    }
    .header .navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding:.2rem  .2rem 0 .2rem;
        height:.68rem;
        font:.26rem "微软雅黑";
        color:#fff;
        opacity: 0.9;
        font-weight: bold;
    }
    .header .navbar li{
        line-height: .68rem;
    }
    .header .navbar .navactive{
        position: relative;
    }
    .header .navbar .navactive a {
        font-size: .3rem;
        font-weight: bold;
        color: #fff;
    }
    /* .header .navbar .navactive::after{
        content: "";
        width: .4rem;
        height: .04rem;
        background-color: #fff;
        position: absolute;
        bottom:0;
        left:.1rem;
        border-radius: .2rem;
    } */
    .header .navbar ul{
        width: 5.52rem;
        display: flex; 
         justify-content: space-between;
        align-items: center;
        padding-right: .86rem;
    }
    .header .navbar .fen{
        white-space: nowrap;
        font-size:.26rem ;
        color:#fff;
        
    }
    /* 列表页头部 */
    .header .headtop .htsearch {
        display: flex;
        align-items: center;
    }
    .header .headtop .hl{
        font-size: .33rem;
        color: #fff;
        padding:0 .21rem 0  .16rem;
    }
    .header .headtop form{
        position: relative;
    }
    .header .headtop input[type=search]{
        width: 5.79rem;
        height: .64rem;
        background-color: #ffff;
        border: 1px solid #E6E6E6;
        border-radius: 3px;
        text-indent: .35rem;
    }
    .header .headtop input[type="search"]::placeholder{
        font:.28rem/.64rem "微软雅黑";
        color:#999999;
        line-height: .64rem;
    }
    .header .headtop input[type="search"]::-webkit-search-cancel-button{
        -webkit-appearance: none;
        height: .25rem;
        width: .25rem;
        background:url("../images/关闭.png") no-repeat;
        background-size: contain;
    }
    .header .headtop input[type="submit"]{
        height:.37rem;
        width: .37rem;
        margin-left: .26rem;
}
    .header .headtop .hsr{
        font-size: .37rem;
        position: absolute;
        top: 0.65rem;
        right:-0.55rem;
        color:#fff
    }
    .header .headertop .htnav{
        display: flex;
    }
    .header .headertop .htnav .moy{
        font-size: .17rem;
    }

 

/* 底部 */
     .fotter{
        height: 1.39rem;
        /* flex:1; */
        position:fixed;
        bottom:0;
        left:0; 
        width: 100%;
        background-color:#fff
    }
    .fotter a{
        display: block;
    }
    .fotter ul{
        height: 100%;
        display: flex;
        /* 中间空隙大于旁边空隙，分散布局 */
        justify-content: space-around;
        /* 交叉轴对齐方式 */
        align-items: center;
    }
    .fotter ul img{
        width: auto;
        height: .45rem;
    }
    .fotter ul p{
        margin-top: .1rem;
        font: .2rem/.27rem "微软雅黑";
        color: #333;

        text-align: center;
    }
     .active  {
        color:#FF6040;
    }